<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>商品详情</title>
		<!--公用css-->
		<link rel="stylesheet" type="text/css" href="../common/css/meta.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/rest.css" />
		<link rel="stylesheet" type="text/css" href="../common/css/mui.min.css" />
		<!--公用轮播css-->
		<link rel="stylesheet" type="text/css" href="../common/css/swiper.min.css" />
		<!--mui内置额外的图标-->
		<link rel="stylesheet" type="text/css" href="../common/css/icons-extra.css" />
		<!--导航栏公用css-->
		<link rel="stylesheet" type="text/css" href="../common/css/nav_bar.css" />
		<!--本界面css-->
		<link rel="stylesheet" type="text/css" href="css/hf_details.css" />
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav"></a>
			<span class="mui-title-font">商品详情</span>
			<a href="#"><span class="mui-icon mui-icon-more  mui-pull-right mui-action-menu "></span></a>
		</header>
		
		<!--------------------------->
		<div class="mui-content">
			<!--轮播开始-->
			<div class="banner_box swiper-container">
				<div id="banner" class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/xiangqing1.png">
					</div>
					<div class="swiper-slide"><img src="img/xiangqing2.png">
					</div>
					<div class="swiper-slide"><img src="img/xiangqing3.png">
					</div>
				</div>
				<div class="swiper-pagination"></div>
				<span id="font_left">￥40</span>
				<span id="font_left1">￥79</span>
				<span id="font_right">已售16062</span>
			</div>
			<!--<div class="mui-card" style="margin-top: -0.3rem;">
			<div class="mui-card-content">
			
			</div>
			</div>-->
			<div class="mui-card">
				<div class="mui-card-header"><span class="f_14 f_gray_666">控油镇定神仙水</span><br />资生堂艳容露仙水 150ml</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						资生堂40年经典，坊间昵称为“平价神仙水”！磨砂玻璃非常质感，粉粉的颜色，水和 粉末分离，闻起来像墨水，涂在脸上冰凉舒畅，清爽易吸收，使用后毛孔么明显收敛，对于 痘痘的褪红和镇定效果超好。用化妆棉轻拍在脸上，可做收敛水使用，收缩毛孔；湿敷可做 水膜，祛痘控油；装在小喷瓶中可以做晒后恢复，镇定肌肤，一瓶多用而且平价大碗，绝对是 人手必备的一款亲民“神仙水”。
					</div>
				</div>
				<div class="mui-card-footer">
					<span>邮费:￥8.00</span>
					<span class="mui-card-content-inner">由堆唐商店直接发货</span>
				</div>
				<div class="mui-card-footer">
					<span class="mui-card-footer_span">享包邮</span>
					<span class="mui-card-content-inner">满88元享受包邮</span>
				</div>
				<div class="mui-card-footer">
					<span class="mui-icon mui-icon-checkmarkempty mui_icon_diy"></span>
					<span class="f_14 "> 正品保障</span>
					<span class="mui-icon mui-icon-checkmarkempty mui_icon_diy"></span>
					<span class="f_14 "> 1小时客服响应</span>
					<span class="mui-icon mui-icon-checkmarkempty mui_icon_diy"></span>
					<span class="f_14 "> 7天无忧退货</span>
				</div>
			</div>
			<!--用户口碑部分-->
			<div class="mui-card">
				<div class="mui-card-content mui-koubei">用户口碑</div>
				<div class="mui-card-header mui-card-media">
					<img src="img/jiaju10.png" />
					<div class="mui-media-body">
						roadLamp
						<p>发表于 2016-11-10 13:23</p>
					</div>
				</div>
				<div class="mui-card-content-inner" >
					资生堂出品Pimlit要用消炎祛痘膏 祛痘还遮瑕！针对成人痘，青春痘，闭口，功效：杀菌、消炎、减轻疼感；
					不含油分，涂在皮肤上凉凉的。
				</div>
			</div>
		</div>
		<!--详情-->
			<div class="mui-card">
				<div class="mui-card-content mui-koubei">图文详情</div>
				<div class="mui-card-content-inner" >
				</div>
				<div class="mui-card-footer">
					品牌：资生堂艳容露仙水
				</div>
				<div class="mui-card-footer">
					品类：护肤水
				</div>
				<div class="mui-card-footer">
					规格：150ml
				</div>
				<div class="mui-card-footer">
					产地：日本
				</div>
				<div class="mui-card-footer">
					保质期：5年
				</div>
				<div class="mui-card-footer">
					包装：有盒
				</div>
				<div class="mui-card-footer">
					部分海外商品以批次区分，无保质期，堆糖只选择新鲜批次，请放心采购。
				</div>
				<div class="mui-card-content-inner mui-extra-discount ">
					<img style="width: 100%;" src="img/xiangqing1.png"/>
					<img style="width: 100%;" src="img/xiangqing2.png"/>
					<img style="width: 100%;" src="img/xiangqing3.png"/>
					此款化妆棉不会吸收多余水分，倒取液体时可减少用量，避免浪费，不要靠近货源，棉质质地极易容易着火。
				</div>
				<div class="mui-card-content-inner mui-extra-discount">
					这个产品属于化妆工具，是辅助类产品，本身没有任何美肤功效。
				</div>
				
			</div>
		<div class="extra_div">

		</div>

		<div class="footer_shop">
			<ul class="ul">
				<li>
					<a href="">
						<span class="navbar-label">加入购物车</span>
					</a>
				</li>
				<a href="#picture">
					<li class="li1 f_red">
							<span class="navbar-label f_white   mui-btn-outlined">立即购买</span>
					</li>
				</a>
			</ul>
		</div>
		
		<div id="picture" class=" mui-popover mui-popover-action mui-popover-bottom mui_buy">
				<div class="mui-card-header mui-card-media">
					<img src="img/hufu2.png" />
					<div class="mui-card-content-inner">
						<p><span>资生堂艳容露仙水 150ml</span>
						<span style="color: red;">￥40</span></p>
					</div>
				</div>
				<div class="mui-card-content-inner f_14">
					<span class="mui-card-footer_span">享包邮</span>
					<span class="mui-card-content-inner">满88元享受包邮</span>
					<span class="mui-card-content-inner">邮费:￥8.00</span>
				</div>
				<div class="mui-card-footer">
					选择数量:
				<div class="mui-numbox">
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input class="mui-input-numbox" type="number" />
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
				</div>
				<a href="#">
					<div class="mui-card-footer mui-buy1">
						<span id="alert" class="mui-title mui-buy2  mui-btn-outlined">立即支付</span>
					</div>
				</a>
			</a>
			</div>
			
	</body>
	<script src="../common/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../common/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../common/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var info = document.getElementById("info");
			document.getElementById("alert").addEventListener('tap', function() {
				mui.alert('现在人数很多，请稍后再试', '非常抱歉', function() {
					
				});
			});
		</script>
	<script type="text/javascript">
		//轮播
		var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true,
				speed: 300,
				autoplayDisableOnInteraction: false,
				loop: true,
			}

		);
	</script>

</html>